{extend name="layout/app" /}

{block name="title"}修改个人信息{/block}

{block name="css"}
<style>

</style>
{/block}

{block name="content"}
<div class="container mt-4">
    <div class="row">
        <div class="col-sm-3">
            {include file='common/user-menu' /}
        </div>
        <div class="col-sm-9 p-0">
            <div class="card">
                <div class="card-header bg-white fs-14">
                    修改个人信息
                </div>
                <div id="div-msg" hidden>
                </div>
                <div class="card-body">
                    <form class="col-md-6 offset-3" id="form-info" action="{:url('/user/infoUpdate')}">
                        <meta name="csrf-token" id="__token__" content="{:token()}">
                        <div class="form-group" id="form-input-name">
                            <label for="exampleInputName" class="fs-14 font-weight-bold">用户名</label>
                            <input type="text" name="name" id="input-name" value={:session("name")} placeholder="请填写用户名" class="form-control form-control-sm" id="exampleInputName" aria-describedby="emailHelp">
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="form-group" id="form-input-email">
                            <label for="exampleInputEmail" class="fs-14 font-weight-bold">邮箱</label>
                            <input type="email" name="email" id="input-email" value={:session("email")} placeholder="请填写邮箱" class="form-control form-control-sm" id="exampleInputEmail" aria-describedby="emailHelp">
                            <div class="invalid-feedback"></div>
                        </div>
                        <button type="button" id="btn-info" class="btn btn-primary btn-sm w-100 mt-4 bg-blue text-white">修改</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script>
    $(function () {
        // 显示错误提示
        $('#btn-info').click(function () {
            var form = $('#form-info');
            $.ajax({
                url: form.attr('action'),
                type: 'post',
                data: form.serialize(),
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (res) {
                    if (res.code == 200){
                        notify('success', res.msg)
                        setTimeout(function (){
                            window.location.reload();
                        }, 1000);
                    } else {
                        if (res.msg['name'] && res.msg['email']) {
                            // 提示错误
                            $('#input-name').addClass('is-invalid');
                            $('#form-input-name > div.invalid-feedback').html(`${ res.msg['name'] }`);
                            $('#input-email').addClass('is-invalid');
                            $('#form-input-email > div.invalid-feedback').html(`${ res.msg['email'] }`);
                            getNewToken();
                        } else if (res.msg['email']) {
                            $('#input-email').addClass('is-invalid');
                            $('#form-input-email > div.invalid-feedback').html(`${ res.msg['email'] }`);
                            getNewToken();
                        } else if (res.msg['name']){
                            $('#input-name').addClass('is-invalid');
                            $('#form-input-name > div.invalid-feedback').html(`${ res.msg['name'] }`);
                            getNewToken();
                        } else {
                            $('#div-msg').removeAttr('hidden')
                            $('#div-msg').addClass('alert alert-danger')
                            $('#div-msg').html(`${ res.msg }`);
                            getNewToken();
                        }
                    }
                }
            })
        })

    })
</script>
{/block}
